<!--
 * @Author: zjj
 * @Date: 2020-01-03 10:28:23
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-03 12:06:29
 -->
<!--  -->
<template>
    <div class="mask flex aligin-center justify-center flex-column" @click="closeGuide" @touchmove.prevent>
        <div class="content" @click.stop></div>
        <div class="ok flex aligin-center justify-center" @click.stop="closeGuide">我知道了</div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
}
.content {
  z-index: 998;
  width: 255px;
  height: 373px;
  border-radius: 5px;
  background: url("../assets/imgs/guide.png");
  background-size: 100% 100%;
  animation: show 0.3s 1;
  @keyframes show {
    0% {
      opacity: 0;
      transform: scale(1.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}
.ok {
  margin-top: 35px;
  width: 150px;
  height: 38px;
  font-size: 18px;
  color:#FFF;
  font-weight: 600;
  background: linear-gradient(
    180deg,
    rgba(253, 110, 119, 1),
    rgba(232, 48, 56, 1)
  );
  border-radius: 19px;
  animation: show 0.3s 1;
  @keyframes show {
    0% {
      opacity: 0;
      transform: scale(1.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}
</style>